import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { Menu } from 'antd';
import style from './index.module.css'

const { SubMenu } = Menu;

const HeaderNav = () => {
  // 使用 navigate 进行路由跳转
  const navigate = useNavigate();

  const menuList = [
    {
      path: '/',
      title: '首页',
    },
    {
      path: 'productCenter',
      title: '产品中心',
      children: [
        {
          path: '/ad-formats',
          title: '广告样式',
        },
        {
          path: '/gromore',
          title: 'GroMore',
        },
        {
          path: '/growth-adviser',
          title: '增长参谋',
        },
        {
          path: '/intelligent-layering',
          title: '智能分层',
        },
      ]
    },
    {
      path: 'solutions',
      title: '解决方案',
      children: [
        {
          path: '/solution',
          title: '行业变现解决方案',
        },
        {
          path: '/growth-loop',
          title: '应用闭环增长',
        },
      ]
    },
    {
      path: 'growthcenter',
      title: '成长中心',
    },
    {
      path: 'supportcenter',
      title: '帮助中心',
    },
    {
      path: 'news',
      title: '最新资讯',
    },
    {
      path: 'starPlan',
      title: '聚星计划',
      children: [
        {
          path: '/new-star',
          title: '新星助推计划',
        },
        {
          path: '/star-selection',
          title: '游戏星选计划',
        },
      ]
    },
  ];

  const [currentSelectedKey, setCurrentSelectKey] = useState(localStorage.getItem('CURRENT_MENU_PATH') || '/')

  const handleMenuClick = ({ key }) => {
    navigate(key);
    localStorage.setItem('CURRENT_MENU_PATH', key)
    setCurrentSelectKey(key)
  }

  return (
    <nav className={style.header_nav_menu}>
      <Menu mode="horizontal" onClick={handleMenuClick} selectedKeys={[currentSelectedKey]} style={{ borderBottom: 'none' }}>
        {
          menuList.map(item => {
            if (item.children && item.children.length) {
              return (<SubMenu key={item.path} title={item.title} popupOffset={[-20, 8]}>
                {
                  item.children.map(cItem => <Menu.Item key={cItem.path}>{cItem.title}</Menu.Item>)
                }
              </SubMenu>)
            } else {
              return <Menu.Item key={item.path}>{item.title}</Menu.Item>
            }
          })
        }
      </Menu>
    </nav>
  );
};

export default HeaderNav;